<template>
    <!-- 注意 v-bind="$attrs"记得写 -->
    <BasicModal
        v-bind="$attrs"
        :title="isEdit ? '编辑' : '添加'"
        width="1200px"
        :minHeight="600"
        :okText="isEdit ? '确定' : '添加'"
        @register="register"
        @cancel="cancelFn"
        @ok="okFn"
    >
        <Spin :spinning="spinning" tip="加载中...">
            <a-form :labelCol="{ span: 6 }" layout="vertical">
                <a-form-item required label="标题 ：">
                    <a-input placeholder="请输入标题：" v-model:value="form.title" />
                </a-form-item>
                <a-form-item required label="内容 ：" extra="'（图片视频建议尺寸：686px x 360px）'">
                    <Tinymce
                        v-model="form.content"
                        @change="contentChange"
                        width="100%"
                        height="700"
                    />
                </a-form-item>
            </a-form>
        </Spin>
    </BasicModal>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref, watch, toRaw, PropType } from 'vue'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import { message, Spin } from 'ant-design-vue'
    import { addApi, updateApi, dataItemApi } from '/@/api/content/article/index'
    import { DataItem } from '/@/api/content/article/model/model'
    import { Tinymce } from '/@/components/Tinymce/index'
    export default defineComponent({
        props: {
            selectItem: Object as PropType<DataItem>,
        },
        components: { BasicModal, Spin, Tinymce },
        setup(props, { emit }) {
            const isEdit = ref(false)

            // 表单提交数据
            const form = reactive({
                title: '',
                content: '',
            })
            const spinning = ref(false)
            // model管理
            const [register, { closeModal, getVisible, changeLoading }] = useModalInner()

            watch(getVisible as any, () => {
                if (getVisible) {
                    isEdit.value = props.selectItem ? true : false
                    isEdit.value ? getInfo() : ((form.title = ''), (form.content = ''))
                }
            })
            const getInfo = async () => {
                try {
                    const res = await dataItemApi({
                        _id: props?.selectItem?._id!,
                    })
                    if (res) {
                        const { title, content } = res
                        form.title = title
                        form.content = content
                    }
                } catch (error) {
                    console.log(error)
                }
            }

            const cancelFn = () => {
                closeModal()
            }
            // 富文本内容改变
            function contentChange(value: string) {
                console.log(value)
            }

            // 确认
            const okFn = async () => {
                const info = toRaw(form)
                const { title, content } = info

                // 更新操作

                if (!title) {
                    message.error(`标题不能为空`)
                    return
                }
                if (!content) {
                    message.error(`内容不能为空`)
                    return
                }

                try {
                    const formData: any = {
                        title,
                        content,
                    }
                    isEdit.value ? (formData._id = props?.selectItem?._id!) : null
                    spinning.value = true
                    const res = isEdit.value ? await updateApi(formData) : await addApi(formData)

                    if (res) {
                        spinning.value = false
                        message.success('操作成功')
                        emit('updateData') // 触发父组件更新数据
                        closeModal() // 关闭窗口
                    } else {
                        spinning.value = false
                        message.error('操作失败')
                    }
                } catch (err) {
                    changeLoading(false)
                    console.log(err)
                }
            }
            return {
                isEdit,
                register,
                cancelFn,
                okFn,
                spinning,
                form,
                contentChange,
            }
        },
    })
</script>

<style></style>
